Skip to content

fix: Adjusting styling on the popup in FlightMarker.tsx for better spacing and scaling#13

Open
CMcDonald9 wants to merge 2 commits intoflybywiresim:mainfrom
CMcDonald9:flight_marker_ui_improvements
Open

fix: Adjusting styling on the popup in FlightMarker.tsx for better spacing and scaling#13
CMcDonald9 wants to merge 2 commits intoflybywiresim:mainfrom
CMcDonald9:flight_marker_ui_improvements

Conversation

@CMcDonald9
Copy link
Copy Markdown

@CMcDonald9 CMcDonald9 commented Jul 11, 2023

resolves #12
Old UI shown here

Adjusted UI looks like this:
image

I'm certainly no CSS wizard so let me know if there's a better way to do this but I think this adjustment is much better looking.

@Creative-Difficulty
Copy link
Copy Markdown

Creative-Difficulty commented Jul 31, 2024

@CMcDonald9 In addition to reducing the font size, its a good idea to enable line wrapping and preventing overflow for the text: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text

@CMcDonald9
Copy link
Copy Markdown
Author

@Creative-Difficulty Added "overflow-wrap: "break-word"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Flight number overflowing container

2 participants